<template>
	<div>
		<el-form :rules="rules" ref="loginForm" :model="loginFrom" class="loginContainer">
			<h3 align="center">系统登录</h3>
			<!-- 加入prop，与规则一一对应 -->
			<el-form-item prop="username">
				<el-input type="text" icon="el-icon-user-solid" class="username" name="username" v-model="loginFrom.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" class="password" name="password" v-model="loginFrom.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item prop="code">
				<el-input type="text" class="code" name="code" style="width: 250px;margin-right: 5px;" auto-complete="false"  v-model="loginFrom.code" placeholder="请输入验证码"></el-input>
				<img :src="captchaUrl"></img>
			</el-form-item>
			<!-- 绑定 -->
			
			<el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox><br />
			<el-button @click="submitLogin" type="primary" style="width: 40%;">登录</el-button>
			<el-button @click="resetLoginForm" type="info" style="width: 40%;">重置</el-button>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:"Login",
		mode:'hash',
		data(){
			return{
				loginFrom:{
					username:'admin',
					password:'123456',
					code:''
				},
				/* 图片验证码 */
				captchaUrl:'',
				checked:true,
				rules:{
					username:[
						{required: true, message: '请输入用户名', trigger: 'blur' },	/* 必填验证以 */
						{min:4, message: '用户名长度至少大于3', trigger: 'blur' }/* 长度验证（可选） */
						],
					password:[
						{required: true, message: '请输入密码', trigger: 'blur' },
						{min:6, message: '密码长度至少大于5', trigger: 'blur' }
						],
					code:[
						{required: true, message: '请输入验证码', trigger: 'blur' },
						{min:4,max:4, message: '验证码长度为4', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			/* 表单登录事件 */
			submitLogin(){
				/* 进行表单校验 */
				this.$refs.loginForm.validate(async valid => {
					/* 如果验证失败 */
				   if(!valid) return;
				   console.log("验证成功");
				   /* 访问后台接口，并将数据放回至data中*/
				   /* login 为后台的登录接口 */
				   const {data:res} = await this.$http.post("toLogin",this.loginFrom);
				   console.log(res);
				   if(res.flag == "ok"){
					   window.sessionStorage.setItem('flag','ok'); // session 放置
					   console.log(res.user);
					   this.$message.success("操作成功");
					   /* 在session中保存全局变量*/
					   window.sessionStorage.setItem("username",this.loginFrom.username);
					   /* 实现路由的跳转*/
					   this.$router.push({ path: "/home"});
				   }else if(res.flag == "exception"){
					   console.log(res.flag);
					    this.$message.error("验证码输入错误");
				   }else if(res.flag == "notExit"){
					   console.log(res.flag);
					    this.$message.error("该用户不存在或者密码输入错误,请重新输入");
						/* 将用户名和密码重置 */
						this.resetLoginForm()
				   }else{
					   console.log(res.flag);
					   this.$message.error("操作失败");
				   }
				});
			},
			/* 重置表单事件 */
			resetLoginForm(){
				this.$refs.loginForm.resetFields();
			}
		},
		created(){
			let url = 'http://119.23.248.211:8081/captcha'
			/* 向后端获取接口，并解决图片的JFIF图片乱码问题 */
			axios.get(
				url,{responseType: 'arraybuffer'}
			).then(res => {
				console.log(res);
				this.captchaUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
			}).catch(function(err){
					error(err)
			});
		}
	}
</script>

<style>

	.loginContainer{
		border-radius: 15px; /* 边框圆角*/
		background-clip: padding-box; 
		margin: 180px auto;	/* 外边距 */
		width: 350px;
		padding: 15px 30px 15px 30px;
		background: #fff;
		border:1px solid #EAEAEA;
		box-shadow: 0 0 25px #cac6c6;
	}
	.loginRemember{
		text-align: left;
		margin: 0px 0px 15px 0px;
	}
	.el-form-item__content{
		display: flex;
		align-items: center;
	}
</style>
